<!-- #layout name=blank -->
<style>
    .edit-label-btn {
        opacity: 0;
    }
    
    .panel:hover .edit-label-btn {
        opacity: 1;
    }
</style>
<div id="app">
    <div class="page-header">
        <h1 class="title">{{Kooboo.text.common.Label + ' - ' + mutliLangName}}</h1>
    </div>
    <kb-breadcrumb :breads="breads"></kb-breadcrumb>

    <div class="row" v-if="!labels.length || labels.length === 0">
        <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12" style="margin-top: 40px;">
            <div class="panel panel-default">
                <div class="panel-body">
                    <blockquote>
                        <p class="text-danger">You can use label to create your multilanguage content.</p>
                        <footer>You don't have a label yet</footer>
                    </blockquote>
                </div>
                <div class="panel-footer">{{Kooboo.text.common.empty}}</div>
            </div>
        </div>
    </div>
    <div v-else class="row label-list">
        <div  v-for="(item,index) in labels" class="col-md-4 col-sm-6 col-xs-12 item">
            <div class="panel panel-default">
                <div class="panel-body">
                    <blockquote style="padding-bottom: 0;">
                        <p class="margin-bottom-15"
                           :class="{ 'text-danger': !item.multilingual}"
                           :title="Kooboo.text.site.label.translatedValue">
                            {{item.multilingual || Kooboo.text.site.multiLang.noTranslation}}</p>
                        <blockquote>
                            <p :title="Kooboo.text.site.label.originalValue">{{item.defaultValue}}</p>
                            <footer :title="Kooboo.text.site.label.key ">{{item.name}}</footer>
                        </blockquote>
                    </blockquote>
                </div>
                <div class="panel-footer clearfix">
                    <span :title="Kooboo.text.common.lastModified ">{{item.date}}</span>
                    <div class="pull-right">
                        <button @click="editLabel($event,item,index)"
                                v-kb-tooltip="Kooboo.text.common.edit"
                                class="btn btn-xs blue edit-label-btn"><i class="fa fa-pencil"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div
            class="modal fade"
            data-backdrop="static"
            data-keyboard="false"
            v-kb-modal="showEditModal"
    >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close"@click="onHideEditModal"><i class="fa fa-close"></i></button>
                    <h4 class="modal-title">Edit label</h4>
                </div>
                <div class="modal-body">
                    <template v-if="editingLabel">
                        <div class="form-group">
                            <label>{{editingLabel.name + ' - ' + langName}}</label>
                            <textarea v-model="editingLabel.defaultValue" class="form-control autosize"  readonly disabled></textarea>
                        </div>
                        <div class="form-group">
                            <label >{{editingLabel.name + ' - ' + mutliLangName}}</label>
                            <textarea v-model="newMultiLangValue" class="form-control autosize"></textarea>
                        </div>
                    </template>

                </div>
                <div class="modal-footer">
                    <button class="btn green"  @click="onSaveEditModal">Save</button>
                    <button class="btn gray" @click="onHideEditModal">Cancel</button>
                </div>
            </div>
        </div>

    </div>

</div>
<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/lib/jquery.textarea_autosize.min.js",
            "/_Admin/Scripts/components/kbBreadcrumb.js"
        ])
    })()
</script>
<script src="/_Admin/View/Multilingual/Labels.js"></script>
